<template>
    <el-row class="login_container">
        <el-col :span="12" :xs="24" class="column_container">
            <div class="form_container">
                <span class="form_title">文件存储系统</span>
                <el-form class="login_form">
                    <el-input class="account" type="text" placeholder="请输入您的账号" v-model="loginForm.account"
                        :prefix-icon="User" clearable />
                    <span class="account_tips">{{ accountTips }}</span>
                    <el-input class="password" type="password" placeholder="请输入您的密码" v-model="loginForm.password"
                        :prefix-icon="Lock" clearable show-password />
                    <span class="password_tips">{{ passwordTips }}</span>
                    <el-row class="account_helper">
                        <span class="user_register" @click="clickUserRegister">用户注册</span>
                        <span class="find_password" @click="clickFindPassword">找回密码</span>
                    </el-row>
                    <el-button class="login_btn" @click="login">登录</el-button>
                    <span class="login_tips">{{ loginTips }}</span>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang='ts' name="Login">
    import { ref, reactive, watchEffect } from 'vue';
    import { useRouter } from 'vue-router'
    import { User, Lock } from '@element-plus/icons-vue';
    import {LoginForm} from "@/types/type"
    import axios from "axios";
    import { ElMessage } from 'element-plus';
    import { useUserInfoStore } from "@/store/userInfo";
    import { useAsideMenuInfoStore } from "@/store/asideMenuInfo";

    const userInfo = useUserInfoStore()
    const asideMenuInfo = useAsideMenuInfoStore()

    const loginForm = reactive<LoginForm>({
        account: '',
        password: ''
    })

    let accountTips = ref("")
    let passwordTips = ref("")
    let loginTips = ref("")

    const router = useRouter()

    watchEffect(() => {
        if (loginForm.account.trim().length > 0) {
            accountTips.value = ""
        }
        if (loginForm.password.trim().length > 0) {
            passwordTips.value = ""
        }
    })

    function login() {
        if (loginForm.account.trim() === "" && loginForm.password.trim() === "") {
            accountTips.value = "账号不能为空"
            passwordTips.value = "密码不能为空"
        } else if (loginForm.account.trim() === "") {
            accountTips.value = "账号不能为空"
            passwordTips.value = ""
        } else if (loginForm.password.trim() === "") {
            accountTips.value = ""
            passwordTips.value = "密码不能为空"
        } else {
            const login = axios.create({
                baseURL: "/api",
                headers: {
                    ContentType: "application/x-www-form-urlencoded",
                },
                timeout: 5000,
            })
            const formData = new FormData()
            formData.append("account", loginForm.account)
            formData.append("password", loginForm.password)

            login.post("/login", formData).then((res: any)=> {
                const {data, message, resCode} = res.data
                console.log("data=" + data + ", message=" + message + ", resCode=" + resCode)
                if (data) {
                    const obj = JSON.parse(data)
                    userInfo.token = obj["TOKEN"];
                    asideMenuInfo.menuList = reactive(JSON.parse(obj["MENU_LIST"]))
                    ElMessage({
                        message: "登录成功",
                        type: 'success',
                    }) 
                    // 登录成功, 跳转至首页
                    accountTips.value = ""
                    passwordTips.value = ""
                    router.push({
                        name: "Home",
                    })

                } else {
                    ElMessage({
                        message,
                        type: 'error',
                    }) 
                }
            }).catch((reason: any)=> {
                    ElMessage({
                        message: "登录失败",
                        type: 'error',
                    })
                    console.log(reason)
                })
        }
    }

    function clickUserRegister() {
        router.push( {
            name: "Register"
        })
    }

    function clickFindPassword() {
        router.push( {
            name: "ResetPassword"
        })
    }

</script>

<style scoped lang="scss">
/* 移除number类型下控件右侧的数字加减器 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

/* 移除输入框四周的边框 */
:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;
}

.login_container {
    width: 100%;
    height: 100vh;
    background-image: url($loginBackground);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: flex-end;

    .column_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .form_container {
            width: 540px;
            height: 360px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 12px gray;
            position: relative;

            .form_title {
                position: absolute;
                top: 20px;
                left: 20px;
                font-size: 24px;
                font-weight: bold;
                color: $primaryColor;

            }

            .login_form {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -42%);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;

                .account,
                .password {
                    outline: none;
                    border: 0;
                    border-bottom: 1.5px gray solid;
                    width: 50%;
                    font-size: 16px;
                    caret-color: $primaryColor;

                    &:hover {
                        border: 0;
                        border-bottom: 1.5px $primaryColor solid;
                    }
                }


                .account_helper{
                    width: 50%;
                    justify-content: space-between;
                    padding-left: 10px;
                    padding-right: 10px;
                    margin-top: 15px;
                    .user_register, .find_password {
                        cursor: pointer;
                        color: $primaryColor;
                    }
                }

                .password {
                    margin-top: 30px;
                }

                .account_tips,
                .password_tips,
                .login_tips {
                    color: $primaryColor;
                    font-size: 14px;
                    height: 14px;
                    margin-top: 4px;
                }

                .login_btn {
                    background-color: $primaryColor;
                    color: white;
                    font-size: 16px;
                    width: 50%;
                    margin-top: 20px;
                    outline: none;
                    border-radius: 0;
                    padding-top: 20px;
                    padding-bottom: 20px;

                    &:active {
                        transform: translateY(2px);
                    }
                }
            }
        }
    }
}
</style>